/*
 * NewExpButton 新建实验按钮
 */
import QtQuick 2.15
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14

Item {
    id: root

    /* property 定义开始 */
    property bool newExpBtnEnable: true
    property real newExpBtnRadius: 353
    property url newExpBtnImgPath: "qrc:/icons/status_running.gif" // 实验运行图片
    property url temperatureImgPath: "qrc:/icons/cooling.gif"
    property string newExpText: "23:45" // 新建实验字样
    property string expStatusText: "正在运行" // 运行状态字样
    property string tempText: "56" // 温度字样
    property string totalCycle: "45" // 总循环数
    property string currentCycle: "16" // 当前循环数

    // 枚举
    // 运行状态颜色对应
    property var statusMapper: {"正在运行": "#90FBFF", "故障": "#FF0D0D", "已完成": "#FFBC0D"}

    // 函数
    /*
     * 根据文本使用statusMapper获取对应颜色
     * @param {string} text 文本
     * @return {string} color 颜色
     */
    function getTextColor(text){
        // ...
    }

    // 信号
    signal sigNewExp();
    /* property 定义结束 */

    Rectangle {
        id: newExp
        enabled: newExpBtnEnable
        anchors.fill: parent
        color: "transparent"
        radius: newExpBtnRadius
        Layout.alignment: Qt.AlignCenter

        AnimatedImage {
            id: newExpImage
            anchors.fill: parent
            source: newExpBtnImgPath
            fillMode: Image.PreserveAspectFit
            onCurrentFrameChanged: {
                // console.log(("%1/%2").arg(newExpImage.currentFrame).arg(newExpImage.frameCount))
            }
        }

        // 运行状态
        Label {
            id: expStatus
            text: expStatusText
            font.family: "Alibaba PuHuiTi"
            font.pixelSize: 25
            color: statusMapper[text] ? statusMapper[text] : "transparent"
            anchors.verticalCenter: newExpImage.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenterOffset: -70
        }

        // 新建实验字样
        Label {
            id: newExpText
            text: root.newExpText
            anchors.verticalCenter: newExpImage.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenterOffset: 12
            font.family: "Alibaba PuHuiTi"
            font.bold: true
            font.pixelSize: 48
            color: "#fff"
        }

        // 温度
        Label {
            id: temp
            anchors.verticalCenter: newExpImage.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenterOffset: 65
            font.family: "Alibaba PuHuiTi"
            font.pixelSize: 32
            color: "#9CBAFF"
            text: tempText + qsTr("℃")
        }

        // 升降温图片
        AnimatedImage {
            id: tempIcon
            width: 15
            height: 24
            fillMode: Image.PreserveAspectFit
            source: temperatureImgPath
            anchors.verticalCenter: newExpImage.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenterOffset: 65
            anchors.horizontalCenterOffset: 50
        }

        // 循环数
        Label {
            id: cycle
            font.family: "Alibaba PuHuiTi"
            font.pixelSize: 19
            color: "#FFF"
            text: qsTr(`${currentCycle}/${totalCycle}`)
            anchors.verticalCenter: newExpImage.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenterOffset: 95
        }

        MouseArea {
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor// 指针变为小手图标
            onClicked: {

            }
        }
    }

}
